<template>
  <div class="head">
    <div class="fl" v-show="show">
      <span class="baek"></span>
      <span class="iconfont ff" @click="gohome">&#xe624;</span>
    </div>
    <div class="fr" v-show="!show" ref="div" :style="styleOpacity">
      <span class="iconfont ff" @click="gohome">&#xe624;</span>
      <h3 class="hh">大明宫国家遗址公园</h3>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        show: true,
        styleOpacity: {
          opacity: 0
        }
      }
    },
    methods: {
      gohome() {
        this.$router.go(-1)
      }
    },
    mounted() {
      window.addEventListener("scroll", () => {
        let scroll = document.documentElement.scrollTop
        if (scroll > 20) {
          // console.log(this.$refs.div)
          // this.show = !this.show
          let opacity = scroll / 200;
          opacity = opacity > 1 ? 1 : opacity;
          this.styleOpacity = {opacity};
          this.show = false;
        } else {
          this.show = true;
        }
      })
    }
  }
</script>
<style scoped>
  .head {
    width: 100%;
    font-size: .12rem;
    overflow: hidden;
    position: absolute;
    z-index: 10;
  }
  .baek {
    display: block;
    width: .36rem;
    height: .36rem;
    background-color: #000;
    opacity: .5;
    border-radius: 50%;
  }

  .ff {
    position: absolute;
    top: .08rem;
    left: .08rem;
  color:#fff;
    z-index: 14;
  }
  .head .fr {
    text-align: center;
    width: 100%;
    background-color: #00bcd4;
    position: fixed;
    color: #fff;
    font-weight: noamal;
  }
  .head .fr .hh {
    /*position:absolute;*/
    /*top:50%;*/
    /*left:50%;*/
    /*transform: translate(-50%,-50%);*/
    line-height: .44rem;
    text-align: center;
  }
</style>


